import React, { Component  } from 'react'
import { Link } from "react-router-dom";
import { imgPre } from '../../request/http'
import { SideBar } from 'antd-mobile'
import './Cate.less'
import Header from '../../components/Header/Header';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import { getGoodsCate ,getGoods,actions, getFid} from '../../store/modules/cate';


 class Cate extends Component {
  render() {
    // console.log(this.props)
    let {goodsCate,goods,fid,cateFn:{changeFid}}=this.props
    //取数据
    return (
      <div className="cate">
        <Header title="商品分类" back></Header>
        {/* 3.展示内容 */}
        {/* 3.1左边导航栏 */}
        <div className="list">
          <SideBar defaultActiveKey={fid} onChange={(e) =>changeFid(e)}>
            {goodsCate.map(item => (
              <SideBar.Item  key={item.id} title={item.catename} />
            ))}
          </SideBar>
        </div>
        {/* 3.2对应内容区域 */}
        <div className="content">
          {goods.map((item, index) => {
            return <Link to={'/detail/1/'+ item.id} className='item' key={item.id}>
              <div className='left'>
                <img src={imgPre + item.img} alt="" />
              </div>
              <div className='right'>
                <h3>{item.goodsname}</h3>
                <div><span>{'￥' + item.price}</span><i>{'￥' + item.market_price}</i></div>
                <p>{item.description}</p>
              </div>
            </Link>
          })}
        </div>
      </div>
    )
  }
  componentDidMount() {
    // 1.一进页面发请求
    this.props.cateFn.requestGoodsCate();
    this.props.cateFn.requestGoods();
  }
}
// 取数据
const mapStateToProps=state=>{
  return {
    goodsCate:getGoodsCate(state),
    goods:getGoods(state),
    fid:getFid(state)
  }
}
// 取方法
const mapDispatchToProps=dispatch=>{
  return {
    cateFn:bindActionCreators(actions,dispatch)
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Cate)
